/* stylelint-disable selector-max-specificity -- grid layout has
    lots of overlapping rules defined in different files that rely on different
    specificities to work, one day it would be good to tackle this and properly
    refactor border styles to be less specific */

.ag-row:not(.ag-row-level-0) .ag-pivot-leaf-group {
    margin-left: var(--ag-row-group-indent-size);
}

.ag-row-group-leaf-indent {
    /* Indent leaf content to align with group row label which has an expand
           icon and a space before the text */
    margin-left: calc(var(--ag-cell-widget-spacing) + var(--ag-icon-size));
}

.ag-value-change-delta {
    padding: 0 2px;
}

.ag-value-change-delta-up {
    color: var(--ag-value-change-delta-up-color);
}

.ag-value-change-delta-down {
    color: var(--ag-value-change-delta-down-color);
}

.ag-value-change-value {
    background-color: transparent;
    border-radius: 1px;
    padding-left: 1px;
    padding-right: 1px;
    transition: background-color 1s;
}

.ag-value-change-value-highlight {
    background-color: var(--ag-value-change-value-highlight-background-color);
    transition: background-color 0.1s;
}

.ag-cell-data-changed {
    background-color: var(--ag-value-change-value-highlight-background-color) !important;
}

.ag-cell-data-changed-animation {
    background-color: transparent;
}

.ag-cell-highlight {
    background-color: var(--ag-range-selection-highlight-color) !important;
}

.ag-row,
.ag-spanned-row {
    color: var(--ag-cell-text-color);
    font-family: var(--ag-cell-font-family);
    white-space: nowrap;
    font-size: var(--ag-data-font-size);

    /* Work out the correct line height. --ag-row-height is the default row
           height, --ag-line-height is the actual row height, only set if variable row
           heights are enabled.
    
          - use line height rather than flex align to centre single line text within a
            default height row, because if the row is made larger than the default height
            then we want all additional space to go at the bottom.
          - don't allow line height to be larger than the actual row height as then
            content won't fit
          - subtract the row border width to ensure that text is still centrally aligned
            when there is a thick row border
          - subtract 2px to account for the 1px border around the cell
            */
    --ag-internal-content-line-height: calc(
        min(var(--ag-row-height), var(--ag-line-height, 1000px)) - var(--ag-internal-row-border-width, 1px) - 2px
    );
}

.ag-row {
    /* Rows need a solid background to avoid being transparent when dragging */
    background-color: var(--ag-data-background-color);
    width: 100%;
    height: var(--ag-row-height);
    border-bottom: var(--ag-row-border);

    &.ag-row-editing-invalid {
        background-color: var(--ag-full-row-edit-invalid-background-color);
    }
}

/* Hide the border of the last last row when there is no gap between the row and
   grid edge to prevent a double border. The use of the child  combinator `>`
   is to ensure that the ag-body-vertical-content-no-gap class only hides the
   border of rows in the same grid, not in nested detail grids  */
:where(

    /* there are either 3 or 4 elements between the body and the row as the
       center cols container has an extra layer of nesting than other containers */
    .ag-body-vertical-content-no-gap > div > div > div,
    .ag-body-vertical-content-no-gap > div > div > div > div)>.ag-row-last {
    border-bottom-color: transparent;
}

.ag-sticky-bottom {
    border-top: var(--ag-row-border);
    box-sizing: content-box !important;
}

.ag-group-expanded,
.ag-group-contracted {
    cursor: pointer;
}

.ag-cell,
.ag-full-width-row .ag-cell-wrapper.ag-row-group {
    /* There is always a 1px border around cells, defaulting to transparent to
           avoid layout shift when we add a selection border. */
    border: 1px solid transparent;
    line-height: var(--ag-internal-content-line-height);
    -webkit-font-smoothing: subpixel-antialiased;
}

.ag-cell {
    border-right: var(--ag-column-border);
}

.ag-spanned-cell-wrapper {
    background-color: var(--ag-data-background-color);
    position: absolute;
}

.ag-spanned-cell-wrapper > .ag-spanned-cell {
    display: block;
    position: relative;
}

/* Only display the right border of the rightmost column when there is a gap between the column and grid edge */
:where(.ag-body-horizontal-content-no-gap) .ag-column-last {
    border-right-color: transparent;
}

.ag-cell-wrapper {
    display: flex;
    align-items: center;
    padding-left: calc(var(--ag-indentation-level) * var(--ag-row-group-indent-size));

    > *:where(:not(.ag-cell-value, .ag-group-value)) {
        /* cell widgets like checkboxes don't respond to line-height, so set their
               height to vertically centre them */
        height: var(--ag-internal-content-line-height);
        display: flex;
        align-items: center;
    }

    &:where(.ag-row-group) {
        align-items: flex-start;
    }

    :where(.ag-full-width-row) &:where(.ag-row-group) {
        height: 100%;
        align-items: center;
    }
}

:where(.ag-cell-wrap-text:not(.ag-cell-auto-height)) .ag-cell-wrapper {
    height: 100%;
    align-items: normal;

    :where(.ag-cell-value) {
        height: 100%;
    }
}

.ag-row > .ag-cell-wrapper.ag-row-group {
    padding-left: calc(
        var(--ag-cell-horizontal-padding) + var(--ag-row-group-indent-size) * var(--ag-indentation-level)
    );
}

.ag-cell-focus:not(.ag-cell-range-selected):focus-within,
.ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected),
.ag-full-width-row.ag-row-focus:focus .ag-cell-wrapper.ag-row-group,
.ag-context-menu-open .ag-full-width-row.ag-row-focus .ag-cell-wrapper.ag-row-group,
.ag-cell-range-single-cell,
.ag-cell-range-single-cell.ag-cell-range-handle {
    border: 1px solid;
    border-color: var(--ag-range-selection-border-color);
    border-style: var(--ag-range-selection-border-style);
    outline: initial;
}

/* remove the box shadow added by default to all focussed divs because rows
           use a border only to indicate focus */
.ag-full-width-row.ag-row-focus:focus {
    box-shadow: none;
}

.ag-row-drag,
.ag-selection-checkbox,
.ag-group-expanded,
.ag-group-contracted {
    margin-right: var(--ag-cell-widget-spacing);
}

.ag-drag-handle-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.ag-group-child-count {
    margin-left: 3px;
}

.ag-row-highlight-above::after,
.ag-row-highlight-inside::after,
.ag-row-highlight-below::after {
    content: '';
    position: absolute;
    width: calc(100% - 1px);
    height: var(--ag-row-drag-indicator-width);
    background-color: var(--ag-row-drag-indicator-color);
    border-radius: calc(var(--ag-row-drag-indicator-width) / 2);
    left: 1px;
    pointer-events: none;
}

.ag-row-highlight-above::after {
    top: 0;
}

.ag-row-highlight-below::after {
    bottom: 0;
}

.ag-row-highlight-indent::after {
    display: block;
    width: auto;
    left: calc(
        2 * (var(--ag-cell-widget-spacing) + var(--ag-icon-size)) + var(--ag-cell-horizontal-padding) +
            var(--ag-row-highlight-level) * var(--ag-row-group-indent-size)
    );
    right: 1px;
}

.ag-row-highlight-inside::after {
    display: block;
    width: auto;
    height: auto;
    inset: 0;
    background-color: var(--ag-selected-row-background-color);
    border: 1px solid var(--ag-range-selection-border-color);
}

.ag-body,
.ag-floating-top,
.ag-floating-bottom {
    background-color: var(--ag-data-background-color);
}

.ag-row-odd {
    background-color: var(--ag-odd-row-background-color);
}

/* row selection and hover colors are added on a ::before pseudo element so
      that they overlay on top of the alternating row backgrounds rather than
      replacing them */
.ag-row-selected::before {
    content: '';
    background-color: var(--ag-selected-row-background-color);
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ag-row-hover:not(.ag-full-width-row)::before,
.ag-row-hover.ag-full-width-row.ag-row-group::before {
    content: '';
    background-color: var(--ag-row-hover-color);
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ag-row-hover.ag-row-selected::before {
    background-color: var(--ag-row-hover-color);

    /* apply hover with a background-image so that it overlays on top of the
        existing background-color */
    background-image: linear-gradient(var(--ag-selected-row-background-color), var(--ag-selected-row-background-color));
}

/* Default the content position to relative so that it doesn't appear under the background */
.ag-row.ag-full-width-row.ag-row-group > * {
    position: relative;
}

.ag-column-hover {
    background-color: var(--ag-column-hover-color);
}

.ag-header-range-highlight {
    background-color: var(--ag-range-header-highlight-color);
}

.ag-right-aligned-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* right-align numeric values in cells with wrappers */
.ag-right-aligned-cell .ag-cell-value,
.ag-right-aligned-cell .ag-group-value {
    /* rtl:ignore */
    margin-left: auto;
}

.ag-cell:not(.ag-cell-inline-editing),
/* stylelint-disable-next-line no-descending-specificity */
.ag-full-width-row .ag-cell-wrapper.ag-row-group {
    padding-left: calc(
        var(--ag-cell-horizontal-padding) - 1px + var(--ag-row-group-indent-size) * var(--ag-indentation-level)
    );
    padding-right: calc(var(--ag-cell-horizontal-padding) - 1px);
}

/* in full width rows, a cell renderer is rendered directly into a row with no
      cell in between, in which case we need to apply the padding to the cell
      renderer's wrapper. */
.ag-row > .ag-cell-wrapper {
    padding-left: calc(var(--ag-cell-horizontal-padding) - 1px);
    padding-right: calc(var(--ag-cell-horizontal-padding) - 1px);
}

.ag-row-dragging {
    cursor: move;
    opacity: 0.5;
}

.ag-details-row {
    background-color: var(--ag-data-background-color);
    padding: calc(var(--ag-spacing) * 3.75);
}

.ag-layout-auto-height,
.ag-layout-print {
    .ag-center-cols-viewport,
    .ag-center-cols-container {
        min-height: 150px;
    }
}

.ag-overlay-loading-wrapper,
.ag-overlay-exporting-wrapper,
.ag-overlay-modal-wrapper {
    background-color: var(--ag-modal-overlay-background-color);
}

.ag-skeleton-container {
    width: 100%;
    height: 100%;
    align-content: center;
}

.ag-skeleton-effect {
    background-color: var(--ag-row-loading-skeleton-effect-color);
    width: 100%;
    height: 1em;
    border-radius: 0.25rem;
    animation: ag-skeleton-loading 1.5s ease-in-out 0.5s infinite;
}

.ag-right-aligned-cell .ag-skeleton-effect {
    margin-left: auto;
}

@keyframes ag-skeleton-loading {
    0% {
        background-color: var(--ag-row-loading-skeleton-effect-color);
    }

    50% {
        background-color: color-mix(in srgb, transparent, var(--ag-row-loading-skeleton-effect-color) 40%);
    }

    100% {
        background-color: var(--ag-row-loading-skeleton-effect-color);
    }
}

.ag-loading {
    padding-left: var(--ag-cell-horizontal-padding);
    display: flex;
    height: 100%;
    align-items: center;
}

.ag-loading-icon {
    padding-right: var(--ag-cell-widget-spacing);
}

.ag-icon-loading {
    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
